<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自定义简单动画</title>
    <style type="text/css">
         *
         {  margin:0;padding:0;
          }
          body
          { padding:60px;}
 #panel
 {
     position:relative;
     width:100px;
     height:100px;
     border:1px solid blue;
     background-color:Gray;
     cursor:pointer;
     
 }           
    </style>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
      
            $(function(){
				$("#panel").click(function(){
					//$(this).animate({left:"500px"},3000);//div向右移动500px  
					//$(this).animate({left:"+=500px"},3000);//在当前位置累加向右移动500px
					//$(this).animate({left:"500px",height:"200px"},3000);//向右滑动的同时高度一起慢慢增加到200
					
					//先右移，移完之后再高度 变化
					/*$(this).animate({left:"500px"},3000);//div向右移动500px  
					$(this).animate({height:"300px"},3000);//div向右移动500px*/ 
					
					//链式写法
					$(this).animate({left:"500px"},3000).animate({height:"300px"},3000);//动画队列
					})
				});
    </script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
